<template>
	<el-card>
		<div style="margin-bottom: 15px" v-resize="searchResize">
			<el-button size="mini" icon="el-icon-plus" type="primary" plain @click="addShowClick"
				v-has="'sys:menu:add'">新增</el-button>
		</div>
		<!-- 表格渲染 -->
		<YwTableTree ref="tableRef" :searchData="searchData" :tableProps="tableProps" api="sysMenuFindAllByTree"
			:treeProps="{ children: 'children', hasChildren: 'hasChildren' }" rowKey="id">
			<el-table-column slot="table_oper" label="操作" width="150">
				<template v-slot="scope">
					<el-button type="text" icon="el-icon-edit" v-has="'sys:menu:edit'"
						@click="editShowClick(scope.row)">修改</el-button>
					<el-button type="text" icon="el-icon-delete" v-has="'sys:menu:delByIds'"
						@click="delClick(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</YwTableTree>

		<!-- 添加/修改 -->
		<YwDialog @confirm="confirmClick" width="660px" ref="ywDialogRef" title="添加/修改">
			<template slot="form">
				<el-form :model="curData" inline ref="curDataRef" label-width="110px" :show-message="false">
					<!-- 上级目录 -->
					<el-form-item label="上级目录" required prop="pid">
						<!-- <el-cascader v-model="curData.pid" :options="menuSelectList"
							:props="{ checkStrictly: true,value:'id',label:'name' }" clearable></el-cascader>
							 -->
						<TreeSelect v-model="curData.pid" :treeData="menuSelectList" :show-count="true"
							placeholder="请选择系统菜单" :defaultProps="{id:'id',label:'name',children:'children'}" />
					</el-form-item>
					<!-- 菜单类型 -->
					<el-form-item label="菜单类型" prop="type">
						<el-radio-group v-model="curData.type">
							<el-radio v-for="dict in dict.type.menuType" :key="dict.value" :label="dict.value">
								{{dict.label}}</el-radio>
						</el-radio-group>
					</el-form-item>
					<!-- 名称 排序 -->
					<el-form-item label="菜单名称" required prop="name">
						<el-input v-model="curData.name" placeholder="" clearable maxlength="20"></el-input>
					</el-form-item>
					<el-form-item label="显示排序" required prop="sort">
						<span slot="label">
							<el-tooltip content="显示排序，数字小的靠前" placement="top">
								<i class="el-icon-question"></i>
							</el-tooltip>
							显示排序
						</span>
						<el-input v-model="curData.sort" placeholder="显示排序" type="number"></el-input>
					</el-form-item>

					<!-- 权限标识 -->
					<el-form-item prop="permission" v-if="curData.type == 'GONGNENG'" required>
						<span slot="label">
							<el-tooltip content="控制器中定义的权限标识，如：app:user:list" placement="top">
								<i class="el-icon-question"></i>
							</el-tooltip>
							权限标识
						</span>
						<el-input v-model="curData.permission" placeholder="" maxlength="100"></el-input>
					</el-form-item>
					<!-- 权限标识 路由 -->
					<el-row v-if="curData.type == 'ZICAIDAN'">
						<el-form-item prop="permission" required>
							<span slot="label">
								<el-tooltip content="控制器中定义的权限标识，如：app:lunbotu:list" placement="top">
									<i class="el-icon-question"></i>
								</el-tooltip>
								权限标识
							</span>
							<el-input v-model="curData.permission" placeholder="" maxlength="100"></el-input>
						</el-form-item>
						<el-form-item label="前端组件" prop="component" required>
							<span slot="label">
								<el-tooltip content="访问的组件路径，如：`app/lunbotu`" placement="top">
									<i class="el-icon-question"></i>
								</el-tooltip>
								前端组件
							</span>
							<el-input v-model="curData.component" placeholder="" maxlength="100"></el-input>
						</el-form-item>
					</el-row>
					<el-row v-if="curData.type == 'ZICAIDAN'">
						<el-form-item label="路由地址" prop="routerUrl" required>
							<span slot="label">
								<el-tooltip content="访问的路由地址，如：`/app/lunbotu`" placement="top">
									<i class="el-icon-question"></i>
								</el-tooltip>
								路由地址
							</span>
							<el-input v-model="curData.routerUrl" placeholder="" maxlength="100"></el-input>
						</el-form-item>
						<el-form-item v-if="curData.type == 'ZICAIDAN'" label="路由参数" prop="routerParam">
							<span slot="label">
								<el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
									<i class="el-icon-question"></i>
								</el-tooltip>
								路由参数
							</span>
							<el-input v-model="curData.routerParam" placeholder="" maxlength="100"></el-input>
						</el-form-item>
					</el-row>
					<!-- 菜单图标 -->
					<el-row v-if="curData.type == 'CAIDAN' || curData.type == 'ZICAIDAN'">
						<el-col :span="12">
							<el-form-item label="菜单图标" prop="permission">
								<div style="padding: 10px;border: #ededed 1px solid;height: 40px;width: 40px;cursor: pointer;"
									@click="addSelectIconClick">
									<i v-if="curData.icon != ''" :class="curData.icon"
										style="font-size: 40px;position: relative;"></i>
									<i v-else class="el-icon-plus" style="font-size: 40px;position: relative;"></i>
									<i v-if="curData.icon != ''" class="el-icon-delete-solid"
										style="font-size: 10px;position: absolute;right: 1px;top: 1px;color: #F56C6C;cursor: pointer;"
										@click.stop="curData.icon = ''"></i>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
					<!-- 菜单状态 -->
					<el-form-item label="菜单状态" required v-if="curData.type != 'GONGNENG'">
						<el-radio-group v-model="curData.isShow">
							<el-radio v-for="dict in dict.type.dictIsShow" :key="dict.value" :label="dict.value">
								{{dict.label}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</template>
		</YwDialog>
		<ElIcon ref="elIconRef" @selectchange="iconSelectchange"></ElIcon>
	</el-card>
</template>

<script>
	import ElIcon from "../../components/ElIcon/ElIcon.vue"
	import routerUtil from "../../router/routerUtil.js"
	export default {
		components: {
			ElIcon
		},
		dicts: ["dictIsShow", "menuType"],
		data() {
			return {
				//表格数据
				searchData: {},
				menuList: [],
				menuSelectList: [],
				searchForm: {
					menuName: null,
					status: null,
				},
				curData: {
					id: null,
					pid: ['0'],
					name: null,
					type: 'CAIDAN',
					isShow: true,
					icon: "",
					routerUrl: null,
					routerParam: null,
					component: null,
					permission: null,
					sort: 0,
					remark: null,
				},
				iconIsShow: false,
				iconId: '',
				tableProps: [{
						label: "菜单名称",
						prop: "name",
						width:"140"
					},
					{
						label: "菜单类型",
						prop: "type",
						type: "tagDict",
						result: () => {
							return this.dict.type.menuType
						}
					},
					{
						label: "菜单图标",
						prop: "icon",
						type: "icon"
					},
					{
						label: "权限标识",
						prop: "permission"
					},
					{
						label: "路由地址",
						prop: "routerUrl"
					},
					{
						label: "路由参数",
						prop: "routerParam"
					},
					{
						label: "前端组件",
						prop: "component"
					},
					{
						label: "菜单排序",
						prop: "sort"
					},
					{
						label: "菜单状态",
						prop: "isShow",
						type: "tagDict",
						result: () => {
							return this.dict.type.dictIsShow
						}
					},
					{
						label: "创建时间",
						prop: "createTime",
						width:"160"
					},
				]
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.searchClick()
				this.sysMenuFindSelectByTree()
			})
		},
		methods: {
			searchResize(data) {
				this.$refs.tableRef.refreshSize(data)
			},
			//搜索按钮
			searchClick() {
				this.$refs.tableRef.shuaxin()
			},
			sysMenuFindSelectByTree() {
				this.$api.sysMenuFindSelectByTree({
					isAll: false
				}).then(data => {
					this.menuSelectList = data
				})
			},
			// 添加按钮
			confirmClick() {
				let data = JSON.parse(JSON.stringify(this.curData))
				this.$refs.curDataRef.validate(async (valid) => {
					if (valid) {
						data.pid = data.pid[0]
						if (this.$common.isBlank(data.id)) {
							await this.$api.sysMenuAdd(data)
						} else {
							await this.$api.sysMenuEdit(data);
						}
						//刷新菜单
						routerUtil.initRouter(this, true)

						this.$refs.ywDialogRef.close()
						this.searchClick()
					}
				});
			},
			//添加框展示
			addShowClick() {
				this.curData = {
					id: null,
					pid: ["0"],
					name: null,
					type: 'CAIDAN',
					isShow: true,
					icon: "",
					routerUrl: null,
					routerParam: null,
					component: null,
					permission: null,
					sort: 0,
					remark: null,
				}
				this.$refs.ywDialogRef.open()
			},
			//修改提交按钮
			editSubmitClick() {
				this.$confirm("确定提交?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
					.then(async () => {
						const result = await this.$api.editMenu(this.curData);
						this.$notify({
							title: "提示",
							type: "success",
							message: "操作成功",
						});
						this.getDataMethod();
						//刷新菜单
						routerUtil.initRouter(this, true)

						this.editDialog = false;
					})
					.catch(() => {});
			},
			//修改框展示
			async editShowClick(value) {
				this.curData = JSON.parse(JSON.stringify(value));
				this.curData.children = [];
				this.curData.pid = [this.curData.pid]
				this.$refs.ywDialogRef.open()
			},

			// 获取数据
			async getDataMethod() {
				const result = await this.$api.getSysMenuList();
				this.menuList = result;
			},
			addSelectIconClick() {
				this.$refs.elIconRef.open("add")
			},
			editSelectIconClick() {
				this.$refs.elIconRef.open("edit")
			},
			iconSelectchange(e) {
				console.info(e)
				if (e.biaoshi == 'add') {
					this.curData.icon = e.name
				} else if (e.biaoshi == 'edit') {
					this.curData.icon = e.name
				}
			},
			delClick(row) {
				this.$common.msgBoxDel(() => {
					this.$api.sysMenuDelByIds(row.id).then(res => {
						if (row.type == "CAIDAN" || row.type == 'ZICAIDAN') {
							//刷新菜单
							routerUtil.initRouter(this, true)
						}
						this.searchClick();
					});
				})
			},
		},
	};
</script>

<style lang="scss" scoped></style>